<template>
  <div class="content-statistics-container">
    <h2>内容统计</h2>
    
    <!-- 日期选择器 -->
    <div class="date-filter">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="fetchData"
      ></el-date-picker>
    </div>
    
    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="overview-cards">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">总帖子数</div>
            <div class="card-value">{{ overviewData.totalPosts }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">新增帖子</div>
            <div class="card-value">{{ overviewData.newPosts }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">总评论数</div>
            <div class="card-value">{{ overviewData.totalComments }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-title">新增评论</div>
            <div class="card-value">{{ overviewData.newComments }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-area">
      <!-- 帖子趋势图 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="chart-title">帖子趋势</div>
          <div class="chart-container">
            <line-chart :chart-data="postTrendData" />
          </div>
        </el-card>
      </el-col>
      
      <!-- 评论趋势图 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="chart-title">评论趋势</div>
          <div class="chart-container">
            <line-chart :chart-data="commentTrendData" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 热门帖子排行 -->
    <el-row class="chart-area">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="chart-title">热门帖子排行</div>
          <div class="chart-container">
            <el-table :data="hotPosts" style="width: 100%">
              <el-table-column prop="rank" label="排名" width="80"></el-table-column>
              <el-table-column prop="title" label="标题"></el-table-column>
              <el-table-column prop="author" label="作者" width="120"></el-table-column>
              <el-table-column prop="views" label="浏览量" width="100"></el-table-column>
              <el-table-column prop="comments" label="评论数" width="100"></el-table-column>
              <el-table-column prop="likes" label="点赞数" width="100"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineChart from './charts/LineChart.vue'

export default {
  name: 'ContentStatistics',
  components: {
    LineChart
  },
  data() {
    return {
      dateRange: [new Date(new Date().setDate(new Date().getDate() - 30)), new Date()],
      overviewData: {
        totalPosts: 0,
        newPosts: 0,
        totalComments: 0,
        newComments: 0
      },
      postTrendData: {
        dates: [],
        counts: []
      },
      commentTrendData: {
        dates: [],
        counts: []
      },
      hotPosts: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getOverviewData()
      this.getTrendData()
      this.getHotPosts()
    },
    getOverviewData() {
      // 模拟API调用
      setTimeout(() => {
        this.overviewData = {
          totalPosts: 3256,
          newPosts: 68,
          totalComments: 12894,
          newComments: 342
        }
      }, 500)
    },
    getTrendData() {
      // 模拟API调用
      setTimeout(() => {
        const dates = []
        const postCounts = []
        const commentCounts = []
        
        for (let i = 0; i < 30; i++) {
          const date = new Date(new Date().setDate(new Date().getDate() - 30 + i))
          dates.push(`${date.getMonth() + 1}/${date.getDate()}`)
          postCounts.push(Math.floor(Math.random() * 30) + 20)
          commentCounts.push(Math.floor(Math.random() * 150) + 50)
        }
        
        this.postTrendData = {
          dates,
          counts: postCounts
        }
        
        this.commentTrendData = {
          dates,
          counts: commentCounts
        }
      }, 500)
    },
    getHotPosts() {
      // 模拟API调用
      setTimeout(() => {
        this.hotPosts = [
          { rank: 1, title: '抑郁症自我调节的10个有效方法', author: '张医生', views: 3256, comments: 428, likes: 256 },
          { rank: 2, title: '焦虑症的症状与应对策略', author: '李教授', views: 2987, comments: 356, likes: 198 },
          { rank: 3, title: '如何帮助家人走出抑郁阴影', author: '王心理咨询师', views: 2456, comments: 287, likes: 156 },
          { rank: 4, title: '心理健康小贴士：每天5分钟冥想', author: '赵健康顾问', views: 2154, comments: 198, likes: 128 },
          { rank: 5, title: '失眠困扰？试试这些自然疗法', author: '刘医师', views: 1987, comments: 156, likes: 98 }
        ]
      }, 500)
    }
  }
}
</script>

<style scoped>
.content-statistics-container {
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}

.date-filter {
  margin-bottom: 20px;
}

.overview-cards {
  margin-bottom: 20px;
}

.card-content {
  text-align: center;
}

.card-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.chart-area {
  margin-bottom: 20px;
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.chart-container {
  height: 300px;
}
</style>